<template>
	<view class="Workorder-box">
		<view class="Workorder-top">工单管理</view>
		<view class="Workorder-auto">
			<view class="Workorder-auto-box">
				<view class="Workorder-auto-screen">
					<view class="Workorder-auto-switch">
						<view v-for="(item,index) in list" :key="index">
							<view :class="curror == index ? 'Workorder-auto-switch1' : 'Workorder-auto-switch1-ch'" @click="getCurror(index, item.name)">{{ item.name }}</view>
						</view>
					</view>
					<view class="Workorder-auto-screen1" @click="openXs">
						<u-icon class="Workorder-auto-screen1-img" size="30" name="https://cdn.uviewui.com/uview/example/button.png"></u-icon>
						筛选
					</view>
				</view>
				<view class="Workorder-auto-content">
					<view class="Workorder-auto-Pending" v-if="curror == '0'">
						<view class="Workorder-auto-Pending1" v-for="item in 4" @click="Workorderdetails">
							<view class="Workorder-auto-Pending1-top">
								<view class="Workorder-auto-Pending1-top-id Pending">ID：gd004</view>
								<view class="Workorder-auto-Pending1-top-ts">投诉类型</view>
								<view class="Workorder-auto-Pending1-top-dcl">待处理<u-icon name="arrow-right" color="#92C25B" size="26"></u-icon></view>
							</view>
							<view class="Workorder-auto-Pending1-auto">
								怎么样，这条线索什么时候能拿下啊，看状态跟进 的还不错，加油看好你
							</view>
							<view class="Workorder-auto-Pending1-bottom">
								<view class="Workorder-auto-Pending1-bottom-sj">发起时间：2021/04/08 14:09</view>
								<view class="Workorder-auto-Pending1-bottom-fqr">发起人：XX机构</view>
							</view>
						</view>
					</view>
					<view class="Workorder-auto-Inprocess" v-if="curror == '1'">
						<view class="Workorder-auto-Pending1" v-for="item in 4" @click="Workorderdetails">
							<view class="Workorder-auto-Pending1-top">
								<view class="Workorder-auto-Pending1-top-id">ID：gd005</view>
								<view class="Workorder-auto-Pending1-top-ts">投诉类型</view>
								<view class="Workorder-auto-Pending1-top-dcl">待处理<u-icon name="arrow-right" color="#92C25B" size="26"></u-icon></view>
							</view>
							<view class="Workorder-auto-Pending1-auto">
								怎么样，这条线索什么时候能拿下啊，看状态跟进 的还不错，加油看好你
							</view>
							<view class="Workorder-auto-Pending1-bottom">
								<view class="Workorder-auto-Pending1-bottom-sj">发起时间：2021/04/08 14:09</view>
								<view class="Workorder-auto-Pending1-bottom-fqr">发起人：XX机构</view>
							</view>
						</view>
					</view>
					<view class="Workorder-auto-Processed" v-if="curror == '2'">
						<view class="Workorder-auto-Pending1" v-for="item in 4" @click="Workorderdetails">
							<view class="Workorder-auto-Pending1-top">
								<view class="Workorder-auto-Pending1-top-id">ID：gd006</view>
								<view class="Workorder-auto-Pending1-top-ts">投诉类型</view>
								<view class="Workorder-auto-Pending1-top-dcl">待处理<u-icon name="arrow-right" color="#92C25B" size="26"></u-icon></view>
							</view>
							<view class="Workorder-auto-Pending1-auto">
								怎么样，这条线索什么时候能拿下啊，看状态跟进 的还不错，加油看好你
							</view>
							<view class="Workorder-auto-Pending1-bottom">
								<view class="Workorder-auto-Pending1-bottom-sj">发起时间：2021/04/08 14:09</view>
								<view class="Workorder-auto-Pending1-bottom-fqr">发起人：XX机构</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="Workorder-bottom">
			<bottom/>
		</view>
		<popup ref="child" />
	</view>
</template>

<script>
	import popup from '../../../components/popup/Cluescreening.vue'
	import bottom from '../../../components/bottom-other/index.vue'
	export default {
		components:{ bottom,popup },
		data() {
			return {
				curror: '0',
				list: [
					{
						name: '待处理 4'
					}, 
					{
						name: '处理中 4'
					}, 
					{
						name: '已处理 4'
					}
				],
			}
		},
		onLoad() {

		},
		methods: {
			openXs () {
				this.$refs.child.getOpen()
			},
			getCurror(index){
				this.curror = index
			},
			Workorderdetails() {
				uni.navigateTo({
					url: '/pages/market/Workordermanagement/Workorderdetails'
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.Workorder-box{}
	.Workorder-top{
		color: #fff;
		font-size: 30upx;
		padding: 30upx;
		padding-top: 50upx;
		padding-bottom: 150upx;
		text-align: center;
		background-color: #91C853;
	}
	.Workorder-auto{
		margin: 30upx;
		padding: 30upx;
		margin-top: -100upx;
		background: #FFFFFF;
		box-shadow: 0px 0px 15px 0px rgba(155, 155, 155, 0.3);
		border-radius: 10upx;
	}
	.Workorder-auto-switch{
		width: 100%;
		display: flex;
	}
	.Workorder-auto-switch1{
		color: #fff;
		padding: 10upx 25upx;
		font-weight: 500;
		font-size: 24upx;
		background: #92C25B;
		border-radius: 25upx;
		margin-right: 20upx;
	}
	.Workorder-auto-switch1-ch{
		padding: 10upx 25upx;
		background: #EEEEEE;
		border-radius: 25upx;
		font-size: 24upx;
		font-weight: 500;
		color: #666666;
		margin-right: 20upx;
	}
	.Workorder-auto-screen{
		display: flex;
		margin-top: 20upx;
		margin-bottom: 50upx;
	}
	.Workorder-auto-screen1{
		width: 25%;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		font-size: 24upx;
		font-weight: bold;
		color: #666666;
	}
	.Workorder-auto-screen1-img{
		margin-right: 10upx;
	}
	.Workorder-auto-content{}
	.Workorder-auto-Pending{}
	.Workorder-auto-Pending1{
		margin-top: 30upx;
		padding-bottom: 30upx;
		border-bottom: 1px solid #EEEEEE;
	}
	.Workorder-auto-Pending1:nth-child(1){
		margin-top: 0;
	}
	.Workorder-auto-Pending1:nth-last-child(1){
		border: 0;
		padding-bottom: 0;
	}
	.Workorder-auto-Pending1-top{
		display: flex;
		align-items: center;
		position: relative;
	}
	.Workorder-auto-Pending1-top-id{
		max-width: 50%;
		font-size: 30upx;
		font-weight: bold;
		color: #333333;
	}
	.Pending{
		position: relative;
		padding-left: 30upx;
	}
	.Pending:after{
		top: 45%;
		left: 0;
		content: "";
		width: 10upx;
		height: 10upx;
		background: #FF0000;
		border-radius: 50%;
		position: absolute;
	}
	.Workorder-auto-Pending1-top-ts{
		font-size: 20upx;
		font-weight: 500;
		color: #0081F1;
		padding: 5upx 10upx;
		margin-left: 25upx;
		background: rgba(0, 129, 243, 0.1);
		border-radius: 5upx;
	}
	.Workorder-auto-Pending1-top-dcl{
		right: 0;
		font-size: 26upx;
		font-weight: 500;
		color: #92C25B;
		position: absolute;
	}
	.Workorder-auto-Pending1-auto{
		font-size: 28upx;
		font-weight: 500;
		color: #333333;
		margin: 26upx 0;
		line-height: 44upx;
		text-align: justify;
	}
	.Workorder-auto-Pending1-bottom{
		display: flex;
		font-size: 24upx;
		font-weight: 500;
		color: #888888;
	}
	.Workorder-auto-Pending1-bottom-sj{}
	.Workorder-auto-Pending1-bottom-fqr{
		margin-left: 30upx;
	}
	.Workorder-bottom{}
</style>